<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item in this.list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>

      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    export default {
        name:'HomeSwiper',
        props:{
          list:Array
        },
        data(){
            return {
              swiperOption: {
                pagination:'.swiper-pagination',
                loop:true,

              },
 /*             swiperList:[{
                  id:'0001',
                  imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/71/e4bf6ce2a203ba02.jpg_750x200_c99e3a64.jpg'
              },{
                id:'0002',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1808/2f/6ab88adea2619c02.jpg_750x200_675e9cf2.jpg'
              } ]*/
            }
        },
        computed:{
          showSwiper(){
              return this.list.length
          }
        },
        methods: {

        }
    }
</script>

<style scoped lang="stylus">
  .wrapper >>> .swiper-pagination-bullet-active
       background:#fff
  .wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom:26%
    .swiper-img
      width:100%
</style>
